<style lang="less">
  @import '../../styles/common.less';
</style>
<style>
  .file-add {
    padding: 10px 0px;
  }

  .file-add i {
    font-size: 30px;
    cursor: pointer;
  }
</style>
<template>
  <div class="file-info-div">
    <FormItem :label="title ? title : '附件'">
      <div class="dataDetail-div chooseUser accessory">
        <div class="users" v-for="el in accessory">
          <span class="span-name" v-text="el.name"></span>
          <span class="span-icon" @click="delAccessory(el)">
                    <Icon type="md-close"/>
                  </span>
        </div>
        <!--<Upload
          :before-upload="handleUpload" action="">
          <Button icon="ios-cloud-upload-outline">选择文件</Button>
        </Upload>-->
        <div class="file-add">
          <Icon @click="add()" type="md-add-circle"/>
        </div>
      </div>
    </FormItem>
    <!--选择文件-->
    <Modal v-model="addFileModal" :width="600" :mask-closable="false" :closable="false"
           class-name="vertical-center-modal" class="Modal-Detail-div Height480">
      <h3 slot="header" style="color:#2D8CF0">我的文件</h3>
      <div class="table-head">
        <div class="left" @keydown.enter="searchFun">
          <Input v-model.trim="keyWord" size="default" placeholder="关键字"/>
        </div>
        <div class="left-btn">
          <Button type="text" icon="ios-search" @click="searchFun()">搜索</Button>
        </div>
        <div class="left-btn">
          <Upload
            :before-upload="handleUpload" action="">
            <Button icon="ios-cloud-upload-outline">上传文件</Button>
          </Upload>
        </div>
      </div>
      <Row class="margin-top-10">
        <Table stripe border :columns="columns" :data="data" :height="340"
               @on-selection-change="selectionChange"></Table>
      </Row>
      <div style="margin: 10px;overflow: hidden;height: 36px;">
        <div style="float: right;">
          <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" @click="backFun">取消</Button>
        <Button type="primary" @click="save()">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../../libs/util';
  import Utils from '../../../libs/mod.utils';
  import String from '../../../libs/mod.string';
  import Modal from '../../../libs/mod.Modal';
  import Ckeditor from '../../../libs/mod.ckeditor';
  import util from '@/libs/util.js';
  export default {
    name: 'files',
    components: {},
    props: ['accessory', 'title', 'isDetail'],
    data () {
      return {
        uid: '',
        back_id: -1,

        name: '',
        fileArr: [],

        total: 0,
        page: 1,
        size: 10,
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'name',
            title: '文件名',
            align: 'center',
            ellipsis: true,
            tooltip: true,
          },
          {
            key: 'create_time',
            title: '上传时间',
            align: 'center',
            ellipsis: true,
          },
        ],
        data: [],
        selectionArr: [],

        keyWord: '',

        addFileModal: false,

      };
    },
    created: function () {
      var _this = this;
      _this.selectionArr = _this.accessory || [];
    },
    mounted () {
      var _this = this;
    },
    watch: {
      accessory: function () {
        var _this = this;
        _this.selectionArr = _this.accessory || [];
      },
    },
    methods: {
      add: function () {
        var _this = this;
        _this.selectionArr = _this.accessory || [];
        _this.keyWord = '';
        _this.page = 1;
        _this.getData();
      },
      backFun: function () {
        var _this = this;
        _this.addFileModal = false;
      },
      save: function () {
        var _this = this;
        var accessory = _this.selectionArr;
        var ids = [];
        for (var k in accessory) {
          if (!accessory[k]) {
            continue;
          }
          ids.push(accessory[k].id);
        }
        var obj = {
          accessory: accessory,
          accessoryIds: ids,
        };
        _this.$emit('fileBackFun', obj);
        _this.backFun();
      },
      // 搜索
      searchFun: function () {
        var _this = this;
        _this.page = 1;
        _this.getData();
      },
      // 列表
      getData () {
        var _this = this;
        var search = [];
        if (_this.keyWord) {
          search = [
            {
              keyWord: _this.keyWord,
              logical: 'and',
            }
          ];
        }

        var data = {
          page: _this.page,
          size: _this.size,
          title: _this.keyWord,
          search: search,
        };
        var params = {
          url: '/file/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              if (Utils.idInArray(_data[k].id, _this.selectionArr)) {
                _data[k]._checked = true;//选中
              }
            }
            _this.data = _data;
            _this.addFileModal = true;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 选择
      selectionChange: function (selectionArr) {
        var _this = this;
        var accessory = _this.selectionArr;
        var list = _this.data;// 先删除现列表数据
        for (var k in list) {
          if (!list[k]) {
            continue;
          }
          accessory = Utils.delArrayObjVal(accessory, list[k].id);
        }
        accessory = _this.selectionArr.concat(selectionArr);
        accessory = Utils.arrayObjUnique(accessory, 'id');
        _this.selectionArr = accessory;
      },
      // 分页
      changePage (page) {
        var _this = this;
        _this.page = page;
        _this.getData();
      },

      // 选中附件文件
      handleUpload: function (file) {
        var _this = this;
        _this.UploadFile(file);
        return false;
      },
      // 上传文件
      UploadFile: function (file) {
        var _this = this;
        var formData = new FormData();
        formData.append("file", file);
        var params = {
          url: '/attach/addFile',
          type: Util.method.post,
          data: formData,
          success: _successFun
        };
        Util.ajax(_this, params);
        Utils.spin.show(_this, '正在上传');
        function _successFun(res) {
          Utils.spin.hide(_this);
          if (res.result == 0) {
            var data = res.data;
            var id = data.id;
            var name = data.name;
            var url = data.url;
            var obj = {
              id: id,
              name: name,
              url: url,
            };
            var accessory = _this.accessory || [];
            accessory.push(obj);

            var ids = [];
            for (var k in accessory) {
              if (!accessory[k]) {
                continue;
              }
              ids.push(accessory[k].id);
            }
            var obj = {
              accessory: accessory,
              accessoryIds: ids,
            };
            _this.$emit('fileBackFun', obj);
            _this.backFun();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('上传失败!');
          }
        }
      },
      // 删除附件
      delAccessory: function (el) {
        var _this = this;
        var id = el.id;
        var accessory = _this.accessory;
        for (var k in accessory) {
          if (!accessory[k]) {
            continue;
          }
          if (id == accessory[k].id) {
            var del = accessory.splice(k, 1);
            break;
          }
        }
        var ids = [];
        for (var k in accessory) {
          if (!accessory[k]) {
            continue;
          }
          ids.push(accessory[k].id);
        }
        var obj = {
          accessory: accessory,
          accessoryIds: ids,
        };
        _this.$emit('fileBackFun', obj);
      },
    }
  };
</script>
